import type { PageStyleIdType } from '../../../../types/interfaces'
import { StyleManager } from '../../../../module/style_manager'
import { BodyClasses, PageStyleId, PROJECT_PREFIX } from '../../../../types/constants'

export class BasePage {
  private static instance: BasePage
  readonly styleId: string = PageStyleId[this.name]

  get name(): PageStyleIdType {
    return 'BasePage'
  }

  constructor() {
    // 注册样式
    StyleManager.getInstance().registerStyle(this.styleId, this.getIndexStyles(), false, true)
  }

  /**
   * 获取单例实例
   */
  public static getInstance(): BasePage {
    if (!BasePage.instance) {
      BasePage.instance = new BasePage()
    }
    return BasePage.instance
  }

  /**
   * 添加序号
   */
  addIndex(index: number, $element: JQuery<HTMLElement>): void {
    $element.prepend(`
      <div id="${BodyClasses.INDEX_CONTAINER}">
        <span class="${BodyClasses.INDEX_NUMBER}">#${index + 1}</span>
      </div>
    `)
  }

  /**
   * 获取序号样式
   */
  getIndexStyles(): string {
    return `
/* 序号容器样式 */
#${BodyClasses.INDEX_CONTAINER} {
  grid-area: index;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* 序号数字样式 */
  .${BodyClasses.INDEX_NUMBER} {
    font-size: 14px;
    font-weight: bold;
    color: var(--${PROJECT_PREFIX}-theme-text-secondary);
  }
}
`
  }
}
